<template>
    <div>
        <el-card class="his-container" shadow="never" style="margin-top: 20px;margin-bottom: 20px;">
            <div class="title-container">
                <div class="audit-title">{{$t('internship.approvals')}}</div>
                <div v-if="!list">
                    <el-button
                        v-if="expand"
                        type="text"
                        icon="el-icon-arrow-up"
                        @click="() => {this.showTable = false;this.expand = !expand}"
                    >{{$t('HistoryTable.Retract')}}</el-button>
                    <el-button
                        v-else
                        type="text"
                        icon="el-icon-arrow-down"
                        @click="() => {this.showTable = true;this.expand = !expand}"
                    >{{$t('HistoryTable.Open')}}</el-button>
                </div>
            </div>
            <!-- <el-table tooltip-effect="light" v-show="showTable" stripe :data="tableData" ref="historyTable"> -->
            <edu-table
                :pagination="false"
                v-show="showTable"
                :selection="false"
                :tooltipEffect="tooltipEffect"
                stripe
                :data="tableData"
                ref="historyTable"
                size="mini"
            >
                <!-- <el-table-column
          :label="$t('internship.numerical')"
          type="index"
          width="50">
                </el-table-column>-->
                <edu-table-column :label="$t('HistoryTable.time')">
                    <template slot-scope="props">{{props.row.time | formatDate}}</template>
                </edu-table-column>
                <edu-table-column :label="$t('internship.approver')" prop="approvorName"></edu-table-column>
                <edu-table-column :label="$t('internship.department')" prop="faculty"></edu-table-column>
                <edu-table-column :label="$t('graduate.operate')" prop="result">
                    <template slot-scope="scope">
                        <div class="is-enabled-container">
                            <el-tag v-if="scope.row.result === 'COMMIT'" type="success" round>提交</el-tag>
                            <el-tag v-if="scope.row.result === 'Process'" type="success" round>通过</el-tag>
                            <el-tag v-if="scope.row.result === 'Reject'" type="danger" round>已驳回</el-tag>
                            <el-tag v-if="scope.row.result === 'End'" type="info" round>已结束</el-tag>
                        </div>
                    </template>
                </edu-table-column>
                <el-table-column v-if="node" :label="$t('internProgress.node')" prop="setpId">
                    <template slot-scope="scope">
                        <div class="is-enabled-container">
                            <el-tag v-if="scope.row.setpId ==0">提交</el-tag>
                            <el-tag v-if="scope.row.setpId ==1">学院审核</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-if="nodes" :label="$t('internProgress.node')" prop="setpId">
                    <template slot-scope="scope">
                        <div class="is-enabled-container">
                            <el-tag v-if="scope.row.setpId ==0">提交</el-tag>
                            <el-tag v-if="scope.row.setpId ==1">导师审核</el-tag>
                            <el-tag v-if="scope.row.setpId ==2">基地审核</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <edu-table-column :label="$t('internship.explain')" prop="content"></edu-table-column>
                <!-- <el-table-column :label="$t('HistoryTable.ApprovalResult')" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag size="mini" type="info" v-if="scope.row.result === 'Recall'">已撤回</el-tag>
            <el-tag size="mini" type="success" v-if="scope.row.result === 'COMMIT'">已提交</el-tag>
            <el-tag size="mini" type="success" v-if="scope.row.result === 'End'">已通过</el-tag>
            <el-tag size="mini" type="danger" v-if="scope.row.result === 'Reject'">已拒绝</el-tag>
            <el-tag size="mini" type="success" v-if="scope.row.result === 'Process'">
              {{scope.row.content === '发起流程' ? '已提交' : '已同意'}}
            </el-tag>
          </template>
                </el-table-column>-->
                <!-- <el-table-column show-overflow-tooltip :label="$t('HistoryTable.ApprovalStatement')" prop="content"></el-table-column> -->
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import filters from 'common/src/filters'
export default {
    name: 'HistoryTable',
    props: {
        tableData: {
            type: Array,
            default: () => {
                return []
            }
        },
        list: {
            type: String
        },
        node: {
            type: Boolean,
            default: false
        },
        nodes: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showTable: true,
            expand: true //默认展开
        }
    },
    filters: {
        formatDate(date) {
            return filters.formatDate(date, 'yyyy/MM/dd hh:mm:ss')
        }
    }
}
</script>
<style lang="scss">
.his-container {
    .title-container {
        display: flex;
        align-items: center;
        .audit-title {
            font-size: 16px;
        }
    }
}
</style>
